<template>
  <div class="orderFormCharts">
    <div
      ref="orderFormCharts"
      style="width: 100%; height: 90%; margin: 0 auto"
    />
  </div>
</template>
<script>
// 1、引入echarts图表库
import * as echarts from 'echarts'

const orderForm = {
  xData: [19325, 23438, 31000, 121594, 134141, 681807],
  yData: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
}
export default {
  data() {
    return {
      orderForm: orderForm
    }
  },
  watch: {
    orderForm() {
      this.myCharts.setOption({
        // title: {
        //   text: 'World Population'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          name: '省份：',
          type: 'category',
          data: this.orderForm.yData
        },
        series: [
          {
            name: '订单总量：',
            type: 'bar',
            data: this.orderForm.xData,
            itemStyle: {
              color: '#fa7f64'
            }
          }
        ]
      })
    }
  },
  mounted() {
    this.myCharts = echarts.init(this.$refs.orderFormCharts)
    this.myCharts.setOption({
      // title: {
      //   text: 'World Population'
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      // legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        name: '省份：',
        type: 'category',
        data: this.orderForm.yData
      },
      series: [
        {
          name: '订单总量：',
          type: 'bar',
          data: this.orderForm.xData,
          itemStyle: {
            color: '#fa7f64'
          }
        }
      ]
    })
  }
}
</script>
<style scoped lang="scss">
.orderFormCharts {
  width: 100%;
  height: 100%;
  // background-color: pink;
}
</style>
